<template>
  <div class="index-box">
    <div class="content">
      <router-view></router-view>
    </div>

    <van-tabbar v-model="activeIndex" @change="change" :z-index="999" fixed>
      <van-tabbar-item>
        <span class="tabbar-color">首页</span>
        <template slot="icon" slot-scope="props">
          <!--<span class="iconfont icon-1shuju"></span>-->
          <!-- <img :src="props.active ? 'static/img/chart-active.png' : 'static/img/chart.png'" /> -->
          <van-icon name="home" :color="props.active ? active.color : normal.color"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span class="tabbar-color">发布</span>
        <template slot="icon" slot-scope="props">
          <van-icon name="add-o" :color="props.active ? active.color : normal.color"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item >
        <span class="tabbar-color">订单</span>
        <template slot="icon" slot-scope="props">
          <van-icon name="records" :color="props.active ? active.color : normal.color"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span class="tabbar-color">我的</span>
        <template slot="icon" slot-scope="props">
          <van-icon name="contact" :color="props.active ? active.color : normal.color"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon
  } from 'vant';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
    },
    data() {
      return {
        activeIndex: 0,
        active: {
          color: '#24C320'
        },
        normal: {
          color: '#101010'
        }
      }
    },
    mounted() {
      // //页面重新加载还原首页
      // this.$router.push("/index");
      this.change();
    },
    methods: {
      change() {
        let indexTab = 0;
        let tabbarText = document.getElementsByClassName('tabbar-color');
        switch(this.activeIndex) {
          case 0:
            this.$router.push("/index");
            indexTab = 0;
            break;
          case 1:
            this.$router.push("/publish");
            indexTab = 1;
            break;
          case 2:
            this.$router.push("/order");
            indexTab = 2;
            break;
          case 3:
            this.$router.push("/mine");
            indexTab = 3;
            break;
        }
        for(let i = 0; i < tabbarText.length ; i ++) {
          tabbarText[i].style.color = this.normal.color;
        }
        tabbarText[indexTab].style.color = this.active.color;
      },
    }
  }
</script>

<style scoped="scoped">
.index-box {
  height: 100%;
}
.content {
  height: 100%;
}
</style>